<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#warp{
				padding: 100px;
				background: yellow;
			}
			#box{
				width: 100px;
				height: 100px;
				background: red;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div id="warp" @click="warpbtn()">
			<!--在@click之后加.stop阻止事件冒泡-->
			<!--在@contextmenu之后加.prevent阻止默认事件-->
			<div id="box" @click.stop="boxbtn()" @contextmenu.prevent="boxcontextmenu()">.stop阻止事件冒泡</div>
			<!--在@click之后加.once只能触发一次事件-->
			<div id="box" @click.stop.once="boxbtn()">.once只能触发一次事件</div>
			
			<!-- 键盘事件修饰符(也就是.后面)是keyCode ACSII码 -->
			<input type="text" @keydown.enter="boxenter()" />
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script>
	const vm = new Vue({
		el:"#warp",
		data:{
			
		},
		methods:{
			warpbtn(){
				console.log("warp")
			},
			boxbtn(){
				console.log("box")
			},
			boxcontextmenu(){
				console.log("右击事件")
			},
			boxenter(){
				console.log("enter")
			}
		}
	})
	/*
	document.getElementById("box").oncontextmenu = function(e){
		var e = e||window.event;
		e.preventDefault();
		console.log("右击事件")
	}
	*/
</script>